<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>像素应用 - API文档</title>
    <link rel="stylesheet" type="text/css" href="https://unpkg.com/swagger-ui-dist@3/swagger-ui.css" />
    <style>
        body {
            margin: 0;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
            background-color: #f5f5f5;
        }
        .header {
            background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
            color: white;
            padding: 20px;
            text-align: center;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .header h1 {
            margin: 0;
            font-size: 2.5em;
            font-weight: 300;
        }
        .header p {
            margin: 10px 0 0 0;
            font-size: 1.1em;
            opacity: 0.9;
        }
        .container {
            margin: 20px auto;
            max-width: 1200px;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            overflow: hidden;
        }
        .swagger-ui {
            padding: 20px;
        }
        .info {
            background: #f8f9fa;
            padding: 20px;
            border-bottom: 1px solid #e9ecef;
        }
        .info h2 {
            color: #495057;
            margin-top: 0;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>🖼️ 像素应用</h1>
        <p>API 接口文档</p>
    </div>
    
    <div class="container">
        <div class="info">
            <h2>📋 文档说明</h2>
            <p><strong>项目名称：</strong>像素应用</p>
            <p><strong>API版本：</strong>1.0.0</p>
            <p><strong>基础URL：</strong>http://localhost:8000</p>
            <p><strong>认证方式：</strong>Session认证 (Django内置)</p>
            <p><strong>更新日期：</strong>2025-11-19</p>
        </div>

        <div class="info">
            <h2>🧭 接入指南</h2>
            <p><strong>统一分页：</strong>大多数列表支持 <code>page</code> 与 <code>limit</code>；挑战模块支持 <code>page</code>/<code>page_size</code>，排行榜也兼容 <code>limit</code>。</p>
            <p><strong>响应风格：</strong>社区/用户等接口使用 <code>code/message/data</code>；挑战模块使用 <code>success/data</code>。页面需按接口风格读取。</p>
            <p><strong>社区标签筛选：</strong>动态列表支持 <code>tag</code>（单标签）与 <code>tags</code>（多标签，逗号分隔）。</p>
            <p><strong>作者头像：</strong>动态列表与详情返回 <code>avatar_url</code> 字段，前端直接绑定渲染。</p>
            <p><strong>图片上传：</strong>使用 <code>POST /xiangsu/posts/upload-images/</code>，<code>multipart/form-data</code> 提交 <code>images[]</code> 多文件，返回 <code>data.image_urls</code>。</p>
            <p><strong>会话认证：</strong>登录后以 Cookie 维护会话，前端请求需携带 <code>withCredentials</code>。</p>
        </div>
        
        <div id="swagger-ui"></div>
    </div>

    <script src="https://unpkg.com/swagger-ui-dist@3/swagger-ui-bundle.js"></script>
    <script>
        // 加载Swagger文档
        const ui = SwaggerUIBundle({
            url: '/api/docs/swagger.yaml',
            dom_id: '#swagger-ui',
            deepLinking: true,
            presets: [
                SwaggerUIBundle.presets.apis,
                SwaggerUIBundle.SwaggerUIStandalonePreset
            ],
            layout: "BaseLayout",
            supportedSubmitMethods: ['get', 'post', 'put', 'delete', 'patch'],
            validatorUrl: null,
            onComplete: function() {
                console.log('Swagger UI加载完成');
            }
        });
        
        // 中文翻译
        ui.initOAuth({
            clientId: "your-client-id",
            realm: "your-realms",
            appName: "像素API",
            scopeSeparator: ","
        });
    </script>
</body>
</html>